import style from './App.module.scss';
import React, {useState} from 'react';
import {BackTop, Layout, Menu} from 'antd';
import {
  CloudServerOutlined, CommentOutlined, createFromIconfontCN,
  SearchOutlined,
} from '@ant-design/icons';
import Search from './pages/search/Search';
import {Routes, Route, Link, useLocation} from 'react-router-dom';
import Spiders from './pages/spiders/Spiders';
import bar from './bar.svg';
import logo from './logo.svg';
import DatabaseSearch from './pages/database_search/DatabaseSearch';
import {Comments} from './pages/comments/Comments';
const {Header, Content, Footer, Sider} = Layout;


const IconFont = createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_2957530_vmvi1jrzeyg.js',
});

function App() {
  const [collapsed, setCollapsed]=useState(false);
  const routes=useLocation();
  return (
    <Layout style={{minHeight: '100vh', minWidth: '950px'}}>
      <BackTop/>
      <Sider
        style={{
          overflow: 'auto',
          height: '100vh',
          position: 'fixed',
          left: 0,
          zIndex: 100,
        }} collapsible collapsed={collapsed}
        onCollapse={(c)=>setCollapsed(c)}>
        {collapsed?<div className={style.logo}>
          <img src={logo} alt="bookshelf logo"/>
        </div>:<div className={style.bar}>
          <img src={bar} alt="bookshelf logo"/>
        </div>}
        <Menu theme="dark" selectedKeys={[routes.pathname]} mode="inline">
          <Menu.Item key="/" icon={<SearchOutlined/>}>
            <Link to={'/'}>关键词检索</Link>
          </Menu.Item>
          <Menu.Item key="/tasks" icon={<CloudServerOutlined />}>
            <Link to={'/tasks'}>爬虫任务</Link>
          </Menu.Item>
          <Menu.Item key="/db-search" icon={<IconFont style={{transform: 'scale(1.15)'}} type={'icon-database-search-outline'}/>}>
            <Link to={'/db-search'}>库内检索</Link>
          </Menu.Item>
          <Menu.Item key="/comments" icon={<CommentOutlined />}>
            <Link to={'/comments'}>评论分析</Link>
          </Menu.Item>
        </Menu>
      </Sider>
      <Layout style={{
        marginLeft: collapsed?80:200,
        transition: 'all 0.2s ease',
      }}>
        <Header className="site-layout-background" style={{padding: 0}}/>
        <Content className={style.content}>
          <Routes>
            <Route path={'/'} element={<Search/>} exact/>
            <Route path={'/tasks'} element={<Spiders/>} exact/>
            <Route path={'/db-search'} element={<DatabaseSearch/>} exact/>
            <Route path={'/comments'} element={<Comments/>} exact/>
          </Routes>
        </Content>
        <Footer className={style.footer}>Zhihan Shan 2021 © Bookshelf</Footer>
      </Layout>
    </Layout>
  );
}

export default App;
